<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>YTUI-BUTTON</title>
    <link rel="stylesheet" href="../css/ytui.css" />
    <script src="../js/html-size-calculation.js"></script>

</head>

<body class="header-fixed">
    <header class="header-bar bg-main">
        <a href="../index.html" class="header-left">
            <i class="icon icon-pre"></i>
            <span class="fz28">返回</span>
        </a>
        <h2 class="header-title">Form</h2>
    </header>
    <section class="p30">

        <div class="pb20">
            <h2 class="h2">文本框</h2>
        </div>
        <div class="pb20">
            <input type="text" class="input-text" placeholder="文本框 input-text">
        </div>

        <div class="pb20">
            <h2 class="h2">密码</h2>
        </div>
        <div class="pb20">
            <input type="text" class="input-text" placeholder="密码框 input-text">
        </div>

        <div class="pb20">
            <h2 class="h2">下拉</h2>
        </div>
        <div class="pb20">
            <select class="select">
                <option>猿团科技</option>
                <option>项目部</option>
            </select>
        </div>
        <div class="yt yt-ac mb40 bd pl30 pr30">
            <div class="fz26">Next下拉</div>
            <div class="yt-f1">
                <select class="select select-next" dir="rtl">
                    <option>select select-next</option>
                    <option>项目部</option>
                </select>
            </div>
        </div>
        <div class="pb20">
            <h2 class="h2">单选框</h2>
        </div>
        <div class="pb20 bb">
            <label class="mr20">
                <i class="input-radio"><input name="a" type="radio"/><span></span></i>
                <span class="fz26">单选一</span>
            </label>
            <label>
                <i class="input-radio"><input name="a" type="radio"/><span></span></i>
                <span class="fz28">单选二</span>
            </label>
        </div>

        <div class="pb20 pt20">
            <h2 class="h2">复选框</h2>
        </div>
        <div class="pb20 bb">
            <label class="mr20">
                <i class="input-checkbox"><input type="checkbox"/><span></span></i>
                <span class="fz26">复选一</span>
            </label>
            <label>
                <i class="input-checkbox"><input type="checkbox"/><span></span></i>
                <span class="fz26">复选二</span>
            </label>
        </div>

        <div class="pb20 pt20">
            <h2 class="h2">开关</h2>
        </div>
        <div class="pb20 bb">
            <label>
                <i class="switch"><input type="checkbox" /><span></span></i>
            </label>
        </div>

        <div class="pb20 pt20">
            <h2 class="h2">联动开关</h2>
        </div>
        <div class="pb20">
            <label>
                <i class="switch"><input name="on-off" type="radio" checked  /><span></span></i>
            </label>
            <label>
                <i class="switch"><input name="on-off" type="radio" /><span></span></i>
            </label>
        </div>

        <div class="pb20 pt20">
            <h2 class="h2">滑块</h2>
        </div>
        <div class="pb20">
            <input type="range" class="input-range" value="20" min="0" max="100" />
        </div>

        <div class="pb20 pt20">
            <h2 class="h2">复选框</h2>
        </div>
        <div class="pb20">
            <textarea class="input-text"></textarea>
        </div>


    </section>

</body>



</html>